<template>
    <div>
        <div>
            <el-row  >
                <el-col :span="8" v-for="(item,index) in movieList" :key="index"><div class="grid-content bg-purple">
                    <ul>
                        <li>电影名: {{item.name}}</li>
                        <li>放映时间: {{item.time}}</li>
                        <li>价格: {{item.price}}</li>
                        <li>数量: {{item.num}}</li>
                        <li>
                            <button @click="buy(item.name,item.time,item.price,1*item.price)">购买</button>
                            <input type="number" id="number" onblur="num(this.value)">
                        </li>
                    </ul>
                </div></el-col>
            </el-row>

        </div>
    </div>
</template>

<script>
// @ is an alias to /src


export default {
    name: 'Home',
    data() {
        return {
            movieList:""
        }
    },
    mounted(){
      this.init()
    },
    methods:{
      init:function () {
          this.axios.get('api/findAll').then(
              r =>this.movieList =  r.data
          )
      },
        // eslint-disable-next-line no-unused-vars
        buy:function (name,time,price,money) {
            var obj = new URLSearchParams();
            obj.append("name",name);
            obj.append("time",time);
            obj.append("price",price);
            obj.append("money",money);
            this.axios.post('/findAll/add',obj)
        }
    }
}
</script>


<style scoped>

</style>
